<!--附件列表-->
<style lang="less">
  @import 'cms_fileslist.less';
</style>

<template>
  <div class="cms_fileslist">
    <Modal v-model="filesListModel" :z-index="499"  :footer-hide="true" draggable class="filesListModel">
      <p slot="header" style="text-align: left">
        <span>图片选择</span>
      </p>
      <div style="text-align: center">
        <Row>
          <Col span="24">
            <Card style="margin-bottom: 10px">
              <Form inline ref="searchConf" :model="searchConf" class="cms_contentTable" @submit.native.prevent>
                <FormItem prop="iscite">
                  <Select v-model="searchConf.iscite" clearable placeholder="请选择状态" @on-change="search" style="width:150px">
                    <Option :value="1">引用</Option>
                    <Option :value="0">非引用</Option>
                  </Select>
                </FormItem>
                <FormItem prop="filename">
                  <Input v-model="searchConf.filename" clearable placeholder="请输入标题..." style="width: 250px"  @on-enter="search"></Input>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="search">查询</Button>
                </FormItem>
                <FormItem>
                  <Button @click="schReset('searchConf')">重置</Button>
                </FormItem>
              </Form>
            </Card>
          </Col>
          <Col span="24">
            <Card>
              <div>
                <Table :loading="tableLoading" :columns="columnsList" :data="tableData" border disabled-hover>
                  <template slot-scope="{ row, index }" slot="isheadimg">
                    <i-switch size="large" v-model="row.isheadimg === 1" disabled="disabled">
                      <span slot="open">YES</span>
                      <span slot="close">NO</span>
                    </i-switch>
                  </template>

                  <template slot-scope="{ row, index }" slot="iscite">
                    <i-switch size="large" v-model="row.iscite === 1" disabled="disabled">
                      <span slot="open">YES</span>
                      <span slot="close">NO</span>
                    </i-switch>
                  </template>

                  <template slot-scope="{ row, index }" slot="handle">
                    <Button type="primary" title="复制图片路径" ghost style="margin-right: 5px" @click="doCopy(row.url)">复制</Button>
                    <Button type="primary"  @click="checkImg(row)">选择</Button>
                    <!--<Poptip
                      confirm
                      title="您确定要删除这条数据吗?"
                      :transfer='true'
                      @on-ok="del(row, index)">
                      <Button type="error">删除</Button>
                    </Poptip>-->
                  </template>
                </Table>
              </div>
              <div class="margin-top-15" style="text-align: center">
                <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                      :page-size="tableShow.pageSize" @on-change="changePage"
                      @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </Modal>

    <!--图片预览model-->
    <Modal v-model="imgModel" :footer-hide="true" class-name="imgPreview">
      <p slot="header" style="text-align: left">
        <span>图片预览</span>
      </p>
      <div style="text-align: center">
        <img :src="modelImg" width="100%">
      </div>
    </Modal>
  </div>
</template>

<script>
  import { CmsFilesManageListIndex } from '@/api/cms/files'

  export default {
    name: 'cms_fileslist',
    data () {
      return {
        imgSrc: '',
        filesListModel: false, // 图片空间列表选择model
        columnsList: [
          {
            title: 'ID',
            type: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('span', {
                }, params.row.id)
              ])
            }
          },
          {
            title: '预览',
            key: 'imgurl',
            // width: 180,
            align: 'center',
            render: (h, params) => {
              if (params.row.url)
                return h('div', [
                  h('img', {
                    style: {
                      height: "80px",
                      width: "140px",
                      verticalAlign: "middle",
                      cursor: 'pointer',
                      padding: '5px 10px'
                    },
                    attrs: {
                      src: this.imgSrc + params.row.url
                    },
                    on: {
                      'click': () => {
                        if (params.row.url) {
                          this.modelImg = this.imgSrc + params.row.url
                          this.imgModel = true
                        }
                      }
                    }
                  },)
                ])
              else
                return h('div', [
                  h('span', {
                    style: {
                      height: "40px"
                    },
                  }, '暂无')
                ])
            }
          },
          {
            title: '宽度',
            width: 80,
            align: 'center',
            key: 'imgwidth',
            render: (h, params) => {
              return h('div', [
                h('span', {
                }, this.isNull(params.row.imgwidth))
              ])
            }
          },
          {
            title: '高度',
            width: 80,
            align: 'center',
            key: 'imgheight',
            render: (h, params) => {
              return h('div', [
                h('span', {
                }, this.isNull(params.row.imgheight))
              ])
            }
          },
          {
            title: '图片类型',
            align: 'center',
            key: 'filetype',
            width: 90,
            render: (h, params) => {
              return h('div', [
                h('span', {
                }, this.isNull(params.row.filetype))
              ])
            }
          },
          {
            title: '文件大小',
            align: 'center',
            width: 100,
            key: 'filesize',
            render: (h, params) => {
              return h('div', [
                h('span', {
                  style: {
                    color: '#28A753'
                  }
                }, this.isNull(params.row.filesize))
              ])
            }
          },
          {
            title: '创建日期',
            align: 'center',
            key: 'createTime',
            width: 150,
            render: (h, params) => {
              return h('div', [
                h('span', {
                  /* style: {
                     color: '#FD6732'
                   }*/
                }, this.isNull(params.row.createTime))
              ])
            }
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            slot: 'handle'
          }
        ],
        tableLoading: false,
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          filename: '',
          iscite: ''
        },
        imgModel: false, // 图片预览model
        modelImg: '', // 图片src
        copyImgSrc: '', // 复制到剪切板的src
        type: '', // 判断是否是栏目img
      }
    },
    created () {
      this.imgSrc = this.$imgSrc
    },
    methods: {
      init () {
      },
      // 父组件传过来的方法
      showFilestList (type) {
        if (type === 'menu') {
          // 栏目img
          this.type = type
        }
        this.getList()
        this.filesListModel = true
      },
      // 复制图片Url 到剪切板
      doCopy (url) {
        let self = this
        url = self.imgSrc + url
        self.$copyText(url).then(e => {
          self.$Message.success('图片路径复制成功！')
          // console.log(e.text)
        }, function (e) {
          self.$Message.success('复制异常！')
          // console.log(e.text)
        })
      },
      // 选择图片
      checkImg (row) {
        if (this.type === 'menu') {
          row.isheadimg = 0
          row.ismenuimg = 1
          this.$emit('childImgUrl',row)
        } else {
          this.$emit('childImgUrl',row)
        }
        this.filesListModel = false
      },
      // 查询
      search () {
        this.tableShow.currentPage = 1
        this.getList()
      },
      // 重置
      schReset (name) {
        this.$refs[name].resetFields();
        this.getList()
      },
      // 分页
      changePage (page) {
        this.tableShow.currentPage = page
        this.getList()
      },
      changeSize (size) {
        this.tableShow.pageSize = size
        this.getList()
      },
      // 获取列表
      getList () {
        let vm = this
        vm.tableLoading = true
        CmsFilesManageListIndex(
          {
            page: vm.tableShow.currentPage,
            size: vm.tableShow.pageSize,
            filename: vm.searchConf.filename,
            iscite: vm.searchConf.iscite
          }
        ).then(response => {
          let res = response.data
          vm.tableLoading = false
          if (res.code === 1) {
            vm.tableData = res.data.list
            vm.tableShow.listCount = res.data.count
          } else {
            vm.$Message.error(res.msg)
          }
        })
      },
      isNull (e) {
        if (e === '' || e === undefined || e === 'undefined' || e === null || e === 'null' )
          return '--'
        else
          return e
      }
    },
    filters:{
      // 显示时间格式化
      timeType (e) {
        let moment = require('moment')
        let time = moment(e).format('YYYY-MM-DD HH:mm:ss')
        return time
      }
    }
  }
</script>
